<template>
    <div class="home">
      <!-- 地址及搜索 -->
      <zh-header :leftRouter="{name: 'search'}" icon="icon-fa-search" title="黄石市"></zh-header>
      <!-- 筛选条件 -->
      <section class="condition bs mb6r" ref="condition">
        <div class="tab f16r">
          <div class="tab-item" @click="toggle('condition-1')">排序 <i class="icon-fa-caret-down"></i></div>
          <div class="tab-item" @click="toggle('condition-2')">租金 <i class="icon-fa-caret-down"></i></div>
          <div class="tab-item" @click="toggle('condition-3')">户型 <i class="icon-fa-caret-down"></i></div>
        </div>
        <mt-tab-container v-model="action" class="mt-tab-container" ref="tabContainer">
          <mt-tab-container-item id="condition-1">
            <mt-cell v-for="(order, index) in orders" :key="index" :title="order.desc" @click.native="orderBy(index, order.value)"></mt-cell>
          </mt-tab-container-item>
          <mt-tab-container-item id="condition-2">
            <mt-cell v-for="(price, index) in prices" :key="index" :title="price.desc" @click.native="orderBy(index, price.value)"></mt-cell>
          </mt-tab-container-item>
          <mt-tab-container-item id="condition-3">
            <mt-cell v-for="(houseType, index) in houseTypes" :key="index" :title="houseType.desc" @click.native="orderBy(index, houseType.value)"></mt-cell>
          </mt-tab-container-item>
        </mt-tab-container>
      </section>
      <!-- 遮罩层 -->
      <section class="shade" ref="shade" v-if="shadeShow" @click="action=''"></section>
      <!-- 首页房屋列表 -->
      <section class="house-list bs" v-if="show">
        <header class="title"><i class="icon icon-fa-home"></i>房源</header>
        <mt-loadmore :bottom-method="loadmore" :bottom-all-loaded="!hasMore" ref="loadmore">
          <ul class="list">
            <li class="list-item h90r" v-for="(house, index) in houses" @click="detail(house)" :key="index">
              <section class="item-left">
                <img v-lazy="house.preview">
              </section>
              <div class="item-right">
                <section class="title">
                  <header>{{house.title}}</header>
                  <span class="position">{{house.position}}</span>
                </section>
                <h5 class="info">
                  <section class="info-left">
                    <span class="type">{{house.type}}</span>|<span class="area">{{house.area}}㎡</span>
                  </section>
                  <section class="info-right">
                    <span class="price">{{house.price.value}}元/{{house.price.type}}</span>
                  </section>
                </h5>
                <div class="desc">
                  <div class="content">{{house.description}}</div>
                  <!-- <span class="collection">{{house.collection}}收藏</span> -->
                </div>
              </div>
            </li>
          </ul>
        </mt-loadmore>
      </section>
    </div>
</template>

<script>
  import zhHeader from '@/components/Header'
  import { MessageBox, Cell, TabContainer, TabContainerItem, Loadmore } from 'mint-ui'

  export default {
    data() {
      return {
        show: true,
        action: '',
        orders: [{desc: '综合排序', value: 0}, {desc: '价格从低到高', value: 1}, {desc: '价格从高到低', value: 2}],
        prices: [{desc: '不限租金', value: 0}, {desc: '500元以下', value: 500}, {desc: '500-1000元', value: 1000}, {desc: '1000-1500元', value: 1500}, {desc: '1500-2000元', value: 2000}, {desc: '2500-3000元', value: 3000},
        {desc: '3000元以上', value: Infinity}],
        houseTypes: [{desc: '整租', value: 0}, {desc: '合租', value: 1}],
        shadeShow: false,
        houses: [{
          title: "内蒙古海景房",
          preview: "https://cbu01.alicdn.com/img/ibank/2018/265/447/8492744562_722461326.220x220.jpg",
          subTitle: "xxxxxxxxxx",
          position: "内蒙古",
          description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
          area: 100,
          type: "一室三厅",
          price: {
            value: 20000,
            type: "月"
          }
        }, {
          title: "内蒙古海景房",
          preview: "https://cbu01.alicdn.com/img/ibank/2018/265/447/8492744562_722461326.220x220.jpg",
          subTitle: "xxxxxxxxxx",
          position: "内蒙古",
          description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
          area: 100,
          type: "一室三厅",
          price: {
            value: 20000,
            type: "月"
          }
        }], // 数据目前每次进路由时都会刷新, 不合理, 待保存在整个状态下
        hasMore: false,
        page: 1,
      }
    },
    components: {
      zhHeader,
      TabContainer,
      TabContainerItem,
      Cell,
      Loadmore
    },
    methods: {
      toggle(item) {
        if(this.action === item)
          this.action = ''
        else
          this.action = item
      },
      // 排序暂时未定
      orderBy(type, value) {
        // console.log(type, value)
      },
      loadmore() {
        // console.log('loadmore...')
      },
      detail(house) {
        this.$router.push({name: 'detail'})
      }
    },
    watch: {
      action(to, form) {
        if(to === '')
          this.shadeShow = false
        else {
          this.shadeShow = true
          this.$nextTick(() => {
            let tabContainer = this.$refs.tabContainer.$el
            let condition = this.$refs.condition
            let top = tabContainer.offsetTop + tabContainer.offsetHeight + condition.offsetTop
            this.$refs.shade.style.top = top + 'px'
          })
        }
      }
    }
  }
</script>

<style lang="stylus">
.home
  margin-bottom: 2rem
  >.condition
    position: relative
    background: white
    .tab
      display: flex
      .tab-item
        flex: 1
        min-height: 1.44rem
        line-height: 1.44rem
        text-align: center
    .mt-tab-container
      position: absolute
      width: 100%
      z-index: 100
  >.shade
    position: fixed
    bottom: 0
    left: 0
    right: 0
    z-index: 100
    background: rgba(0 0 0 .8)
  >.house-list
    background: white
    >.title
      padding: .24rem .48rem .24rem .48rem
      font-size: .44rem
      color: #999
      .icon
        margin-right: 6px
    .list
      .list-item
        display: flex
        padding: 14px 8px
        // overflow: hidden
        &:not(:last-child)
          border-bottom: 1px solid #eee
        .item-left
          margin-right: 8px
          img
            width: 2.56rem
            height: 2.56rem
          img[lazy=loading]
            background: #eee
        .item-right
          flex: 1
          color: #999
          font-size: 0.48rem
          .title
            display: flex
            font-size: 0.56rem
            font-weight: 700
            color: #333
            header
              flex: 1
            .position
              width: 2.4rem
              line-height: .8rem
              text-align: right
              font-size: .44rem
          .info
            display: flex
            margin-top: .16rem
            font-size: .4rem
            color: #666
            .info-left
              flex: 1
              .type
                margin-right: 4px
              .area
                margin-left: 4px
            .info-right
              width: 2.8rem
              text-align: right
              .price
                color: red
          .desc
            display: flex
            margin-top: 6px
            height: .88rem
            overflow: hidden
            font-size: .44rem
            .content
              word-break: break-word
    .mint-loadmore-bottom
      overflow: hidden
</style>
